<template>
    <div>
        <el-card>
            <div style="display: flex;">
                <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" :size="60"
                    style="margin-top: 5px; "></el-avatar>
                <div style="margin-left: 30px; display: flex;">
                    <p style="font-size: 19px;">Hello, {{ username }} </p>
                    <p
                        style="margin-top: 5px; font-size: 13px; position: relative; top: 40px; left: -110px; color: #708090;">
                        继续看风景去，世间万千景致有大美，等我千万年，不可辜负。</p>
                </div>
                <div></div>
            </div>
        </el-card>

        <el-card style="position: relative;">
            <template #header>
                <div class="card-header">
                    <span style="margin-left: 30px;">
                        <h2>专业及学科</h2>
                    </span>
                </div>
                <el-dropdown style="position: absolute; right: 3%; top: 11%;" split-button type="primary">
                    <span class="el-dropdown-link" style="font-size: 16px;">
                        专业详情<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item v-for="(subject, index) in subjects" :key="index"
                                @click="dropdownBottom(subject, index)">{{
                                    subject
                                }}</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </template>

            <el-dialog v-model="visible" :show-close="false" style="width: 900px;height: 500px;">
                <template #header="{ close, titleId, titleClass }">
                    <div class="my-header">
                        <h4 :id="titleId" :class="titleClass">{{ click_subject }}</h4>
                        <el-button type="danger" @click="close">
                            <el-icon class="el-icon--left">
                                <CircleCloseFilled />
                            </el-icon>
                            Close
                        </el-button>
                    </div>
                </template>
                <div>
                    <div id="score" style="height: 340px;width: 900px;margin-top: 10px;"> </div>
                    <div style="height: 100px;width: 900px; padding-left: 8%;">
                        <span style="font-family: myFirstFont; font-size: 16px;" v-for="(item, index) in top3_array">Top{{
                            index + 1 }}:{{ item.name }} ({{ item.score }}分) &nbsp&nbsp&nbsp</span>
                    </div>
                </div>
            </el-dialog>

            <!-- 学科列表 -->
            <div>
                <el-row :gutter="12">
                    <el-col :span="8" v-for="(subject) in subjects">
                        <el-card shadow="hover" @click="dropdownBottom(subject)" style="cursor: pointer;"> {{ subject }}
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </el-card>
    </div>
</template>
  
<script setup>
import { onMounted, ref } from 'vue'
import { ElButton, ElDialog } from 'element-plus'
import { CircleCloseFilled } from '@element-plus/icons-vue'
import request from '../utils/request.js'
import * as echarts from 'echarts';


let username = localStorage.getItem("username");
let subjects = ["Java语言程序设计", "MySQL数据库应用", "HTML5应用开发基础", "Linux操作系统", "JavaScript脚本编程", "大数据处理", "大数据平台部署与运维", "大数据分析与开发", "大数据存储与挖掘", "基于大数据构建用户画像"]
const visible = ref(false)
let click_subject = ref('')

onMounted(() => {

})

let top3_array = ref({})
const dropdownBottom = async (subject, index) => {
    visible.value = true;
    click_subject.value = subject;

    let response = await request.get("/subject/all");

    // let subject_name = subject;
    // switch (subject_name) {
    //     case 'Java语言程序设计': subject_name = "java2";
    //         break;
    //     case 'MySQL数据库应用': subject_name = "mysqlDb";
    //         break;
    //     case 'HTML5应用开发基础': subject_name = "html5";
    //         break;
    //     case 'Linux操作系统': subject_name = "linux";
    //         break;
    //     case 'JavaScript脚本编程': subject_name = "javascript";
    //         break;
    //     case '大数据处理': subject_name = "bigdataPrecessing";
    //         break;
    //     case '大数据平台部署与运维': subject_name = "bigdataPlatform";
    //         break;
    //     case '大数据分析与开发': subject_name = "bigdataAnalysis";
    //         break;
    //     case '大数据存储与挖掘': subject_name = "bigdataStorageMining";
    //         break;
    //     case '基于大数据构建用户画像': subject_name = "userProfile";
    //         break;
    // }

    //班级课程均分
    if (subject == "Java语言程序设计") {
        let res = response.filter(x => x.java2 != null)
        let obj1 = res.reduce((acc, { java2, className }) => {
            if (!acc[className]) {
                acc[className] = { className, sum_score: 0, student_num: 0, fail_number: 0 }
            }
            acc[className].sum_score += Number(java2);
            acc[className].student_num += 1;
            if (java2 < 60) {
                acc[className].fail_number += 1;
            }
            return acc;
        }, {});
        //  Object.values  ：返回一个给定对象自身的所有可枚举属性值的数组
        let arr = Object.values(obj1);
        let java2_avg_score = arr.map(({ className, sum_score, student_num, fail_number }) => ({ className, avg_score: (sum_score / student_num).toFixed(2), fail_number }));
        let max_java2 = response.filter(x => x.java2 != null).map(({ java2, name }) => ({ name, score: java2 })).sort((a, b) => b.score - a.score).slice(0, 5);
        top3_array.value = max_java2;
        let my_echart1 = echarts.init(document.getElementById('score'));
        my_echart1.setOption({
            xAxis: {
                type: 'category',
                data: java2_avg_score.map(x => x.className),
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                top: 0,
                left: "center",
                data: ["均分", "不及格人数"],
            },
            yAxis: [
                {
                    type: "value",
                    splitLine: { show: false },
                    axisLabel: {
                        show: true,
                        showMinLabel: true,
                        showMaxLabel: true,
                        formatter: function (value) { return value; },
                    },
                },
                {
                    type: "value",
                    splitLine: { show: false },
                    axisLabel: {
                        show: true,
                        showMinLabel: true,
                        showMaxLabel: true,
                        formatter: function (value) { return value; },
                    },
                },
            ],
            series: [
                {
                    name: '均分',
                    data: java2_avg_score.map(x => x.avg_score),
                    type: 'bar',
                    yAxisIndex: 0,
                    label: {
                        show: true,
                        fontSize: 25
                    },
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: "#83bff6" },
                            { offset: 0.5, color: "#188df0" },
                            { offset: 1, color: "#188df0" },
                        ]),
                    },
                },
                {
                    name: "不及格人数",
                    type: "line",
                    yAxisIndex: 1,
                    smooth: true,
                    data: java2_avg_score.map(x => x.fail_number),
                    label: { show: true }
                },
            ]
        });
    } else if (subject == "MySQL数据库应用") {
        let obj1 = response.filter(x => x.mysqlDb != null).reduce((acc, { mysqlDb, className }) => {
            if (!acc[className]) {
                acc[className] = { className, sum_score: 0, student_num: 0, fail_number: 0 }
            }
            acc[className].sum_score += Number(mysqlDb);
            acc[className].student_num += 1;
            if (mysqlDb < 60) {
                acc[className].fail_number += 1;
            }
            return acc;
        }, {});
        //  Object.values  ：返回一个给定对象自身的所有可枚举属性值的数组
        let arr = Object.values(obj1);
        let mysqlDb_avg_score = arr.map(({ className, sum_score, student_num, fail_number }) => ({ className, avg_score: (sum_score / student_num).toFixed(2), fail_number }));
        let max_mysqlDb = response.filter(x => x.mysqlDb != null).map(({ mysqlDb, name }) => ({ name, score: mysqlDb })).sort((a, b) => b.score - a.score).slice(0, 5);
        top3_array.value = max_mysqlDb;
        let my_echart1 = echarts.init(document.getElementById('score'));
        my_echart1.setOption({
            legend: {
                top: 0,
                left: "center",
                data: ["均分", "不及格人数"],
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            xAxis: {
                data: mysqlDb_avg_score.map(x => x.className),
            },
            yAxis: [
                {
                    type: "value",
                    splitLine: { show: false },
                    axisLabel: {
                        show: true,
                        showMinLabel: true,
                        showMaxLabel: true,
                        formatter: function (value) { return value; },
                    },
                },
                {
                    type: "value",
                    splitLine: { show: false },
                    axisLabel: {
                        show: true,
                        showMinLabel: true,
                        showMaxLabel: true,
                        formatter: function (value) { return value; },
                    },
                },
            ],
            series: [
                {
                    name: '均分',
                    data: mysqlDb_avg_score.map(x => x.avg_score),
                    type: 'bar',
                    yAxisIndex: 0,
                    label: {
                        show: true,
                        fontSize: 25
                    },
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: "#83bff6" },
                            { offset: 0.5, color: "#188df0" },
                            { offset: 1, color: "#188df0" },
                        ]),
                    },
                },
                {
                    name: "不及格人数",
                    type: "line",
                    smooth: true,
                    yAxisIndex: 1,
                    data: mysqlDb_avg_score.map(x => x.fail_number),
                    label: { show: true }
                },
            ]
        });
    } else if (subject == "HTML5应用开发基础") {
        let obj1 = response.filter(x => x.html5 != null).reduce((acc, { html5, className }) => {
            if (!acc[className]) {
                acc[className] = { className, sum_score: 0, student_num: 0, fail_number: 0 }
            }
            acc[className].sum_score += Number(html5);
            acc[className].student_num += 1;
            if (html5 < 60) {
                acc[className].fail_number += 1;
            }
            return acc;
        }, {});
        //  Object.values  ：返回一个给定对象自身的所有可枚举属性值的数组
        let arr = Object.values(obj1);
        let subject_avg_score = arr.map(({ className, sum_score, student_num, fail_number }) => ({ className, avg_score: (sum_score / student_num).toFixed(2), fail_number }));
        let maxObjectTop5 = response.filter(x => x.html5 != null).map(({ html5, name }) => ({ name, score: html5 })).sort((a, b) => b.score - a.score).slice(0, 5);
        top3_array.value = maxObjectTop5;
        let my_echart1 = echarts.init(document.getElementById('score'));
        my_echart1.setOption({
            legend: {
                top: 0,
                left: "center",
                data: ["均分", "不及格人数"],
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            xAxis: {
                data: subject_avg_score.map(x => x.className),
            },
            yAxis: [
                {
                    type: "value",
                    splitLine: { show: false },
                    axisLabel: {
                        show: true,
                        showMinLabel: true,
                        showMaxLabel: true,
                        formatter: function (value) { return value; },
                    },
                },
                {
                    type: "value",
                    splitLine: { show: false },
                    axisLabel: {
                        show: true,
                        showMinLabel: true,
                        showMaxLabel: true,
                        formatter: function (value) { return value; },
                    },
                },
            ],
            series: [
                {
                    name: '均分',
                    data: subject_avg_score.map(x => x.avg_score),
                    type: 'bar',
                    label: {
                        show: true,
                        fontSize: 25
                    },
                    yAxisIndex: 0,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: "#83bff6" },
                            { offset: 0.5, color: "#188df0" },
                            { offset: 1, color: "#188df0" },
                        ]),
                    },
                },
                {
                    name: "不及格人数",
                    type: "line",
                    smooth: true,
                    yAxisIndex: 1,
                    data: subject_avg_score.map(x => x.fail_number),
                    label: { show: true }
                },

            ]
        });
    } else if (subject == "Linux操作系统") {
        let obj1 = response.filter(x => x.linux != null).reduce((acc, { linux, className }) => {
            if (!acc[className]) {
                acc[className] = { className, sum_score: 0, student_num: 0, fail_number: 0 }
            }
            acc[className].sum_score += Number(linux);
            acc[className].student_num += 1;
            if (linux < 60) {
                acc[className].fail_number += 1;
            }

            return acc;
        }, {});
        //  Object.values  ：返回一个给定对象自身的所有可枚举属性值的数组
        let arr = Object.values(obj1);
        let subject_avg_score = arr.map(({ className, sum_score, student_num, fail_number }) => ({ className, fail_number, avg_score: (sum_score / student_num).toFixed(2) }));
        let maxObjectTop5 = response.filter(x => x.linux != null).map(({ linux, name }) => ({ name, score: linux })).sort((a, b) => b.score - a.score).slice(0, 5);
        top3_array.value = maxObjectTop5;
        let my_echart1 = echarts.init(document.getElementById('score'));
        my_echart1.setOption({
            xAxis: {
                data: subject_avg_score.map(x => x.className),
                name: '班级'
            },
            legend: {
                top: 0,
                left: "center",
                data: ["均分", "不及格人数"],
            },

            yAxis: [
                {
                    type: "value",
                    splitLine: { show: false },
                    axisLabel: {
                        show: true,
                        showMinLabel: true,
                        showMaxLabel: true,
                        formatter: function (value) { return value; },
                    },
                },
                {
                    type: "value",
                    splitLine: { show: false },
                    axisLabel: {
                        show: true,
                        showMinLabel: true,
                        showMaxLabel: true,
                        formatter: function (value) { return value; },
                    },
                },
            ],
            series: [
                {
                    name: '均分',
                    data: subject_avg_score.map(x => x.avg_score),
                    type: 'bar',
                    label: {
                        show: true,
                        fontSize: 25
                    },
                    yAxisIndex: 0,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: "#83bff6" },
                            { offset: 0.5, color: "#188df0" },
                            { offset: 1, color: "#188df0" },
                        ]),
                    },
                },
                {
                    name: "不及格人数",
                    type: "line",
                    smooth: true,
                    yAxisIndex: 1,
                    data: subject_avg_score.map(x => x.fail_number),
                    label: { show: true }
                },

            ]
        });
    } else if (subject == "JavaScript脚本编程") {
        let obj1 = response.filter(x => x.javascript != null).reduce((acc, { javascript, className }) => {
            if (!acc[className]) {
                acc[className] = { className, sum_score: 0, student_num: 0, fail_number: 0 }
            }
            acc[className].sum_score += Number(javascript);
            acc[className].student_num += 1;
            if (javascript < 60) {
                acc[className].fail_number += 1;
            }
            return acc;
        }, {});
        //  Object.values  ：返回一个给定对象自身的所有可枚举属性值的数组
        let arr = Object.values(obj1);
        let subject_avg_score = arr.map(({ className, sum_score, student_num, fail_number }) => ({ className, fail_number, avg_score: (sum_score / student_num).toFixed(2) }));
        let maxObjectTop5 = response.filter(x => x.javascript != null).map(({ javascript, name }) => ({ name, score: javascript })).sort((a, b) => b.score - a.score).slice(0, 5);
        top3_array.value = maxObjectTop5;
        let my_echart1 = echarts.init(document.getElementById('score'));
        my_echart1.setOption({
            xAxis: {
                data: subject_avg_score.map(x => x.className),
            },
            legend: {
                top: 0,
                left: "center",
                data: ["均分", "不及格人数"],
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            yAxis: [
                {
                    type: "value",
                    splitLine: { show: false },
                    axisLabel: {
                        show: true,
                        showMinLabel: true,
                        showMaxLabel: true,
                        formatter: function (value) { return value; },
                    },
                },
                {
                    type: "value",
                    splitLine: { show: false },
                    axisLabel: {
                        show: true,
                        showMinLabel: true,
                        showMaxLabel: true,
                        formatter: function (value) { return value; },
                    },
                },
            ],
            series: [
                {
                    name: '均分',
                    data: subject_avg_score.map(x => x.avg_score),
                    type: 'bar',
                    yAxisIndex: 0,
                    label: {
                        show: true,
                        fontSize: 25
                    },
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: "#83bff6" },
                            { offset: 0.5, color: "#188df0" },
                            { offset: 1, color: "#188df0" },
                        ]),
                    },
                },
                {
                    name: "不及格人数",
                    type: "line",
                    smooth: true,
                    yAxisIndex: 1,
                    data: subject_avg_score.map(x => x.fail_number),
                    label: { show: true }
                },
            ]
        });
    } else if (subject == "大数据分析与开发") {
        let obj1 = response.filter(x => x.bigdataAnalysis != null).reduce((acc, { bigdataAnalysis, className }) => {
            if (!acc[className]) {
                acc[className] = { className, sum_score: 0, student_num: 0, fail_number: 0 }
            }
            acc[className].sum_score += Number(bigdataAnalysis);
            acc[className].student_num += 1;
            if (bigdataAnalysis < 60) {
                acc[className].fail_number += 1;
            }
            return acc;
        }, {});
        //  Object.values  ：返回一个给定对象自身的所有可枚举属性值的数组
        let arr = Object.values(obj1);
        let subject_avg_score = arr.map(({ className, sum_score, student_num, fail_number }) => ({ fail_number, className, avg_score: (sum_score / student_num).toFixed(2) }));
        let maxObjectTop5 = response.filter(x => x.bigdataAnalysis != null).map(({ bigdataAnalysis, name }) => ({ name, score: bigdataAnalysis })).sort((a, b) => b.score - a.score).slice(0, 5);
        top3_array.value = maxObjectTop5;
        let my_echart1 = echarts.init(document.getElementById('score'));
        my_echart1.setOption({
            xAxis: {
                data: subject_avg_score.map(x => x.className),
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                top: 0,
                left: "center",
                data: ["均分", "不及格人数"],
            },
            yAxis: [
                {
                    type: "value",
                    splitLine: { show: false },
                    axisLabel: {
                        show: true,
                        showMinLabel: true,
                        showMaxLabel: true,
                        formatter: function (value) { return value; },
                    },
                },
                {
                    type: "value",
                    splitLine: { show: false },
                    axisLabel: {
                        show: true,
                        showMinLabel: true,
                        showMaxLabel: true,
                        formatter: function (value) { return value; },
                    },
                },
            ],
            series: [
                {
                    name: '均分',
                    data: subject_avg_score.map(x => x.avg_score),
                    type: 'bar',
                    label: {
                        show: true,
                        fontSize: 25
                    },
                    yAxisIndex: 0,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: "#83bff6" },
                            { offset: 0.5, color: "#188df0" },
                            { offset: 1, color: "#188df0" },
                        ]),
                    },
                },
                {
                    name: "不及格人数",
                    type: "line",
                    smooth: true,
                    yAxisIndex: 1,
                    data: subject_avg_score.map(x => x.fail_number),
                    label: { show: true }
                },
            ]
        });
    } else if (subject == "大数据平台部署与运维") {
        let obj1 = response.filter(x => x.bigdataPlatform != null).reduce((acc, { bigdataPlatform, className }) => {
            if (!acc[className]) {
                acc[className] = { className, sum_score: 0, student_num: 0, fail_number: 0 }
            }
            acc[className].sum_score += Number(bigdataPlatform);
            acc[className].student_num += 1;
            if (bigdataPlatform < 60) {
                acc[className].fail_number += 1;
            }

            return acc;
        }, {});
        //  Object.values  ：返回一个给定对象自身的所有可枚举属性值的数组
        let arr = Object.values(obj1);
        let subject_avg_score = arr.map(({ className, sum_score, student_num, fail_number }) => ({ className, fail_number, avg_score: (sum_score / student_num).toFixed(2) }));
        let maxObjectTop5 = response.filter(x => x.bigdataPlatform != null).map(({ bigdataPlatform, name }) => ({ name, score: bigdataPlatform })).sort((a, b) => b.score - a.score).slice(0, 5);
        top3_array.value = maxObjectTop5;
        let my_echart1 = echarts.init(document.getElementById('score'));
        my_echart1.setOption({
            xAxis: {
                data: subject_avg_score.map(x => x.className),
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                top: 0,
                left: "center",
                data: ["均分", "不及格人数"],
            },
            yAxis: [
                {
                    type: "value",
                    splitLine: { show: false },
                    axisLabel: {
                        show: true,
                        showMinLabel: true,
                        showMaxLabel: true,
                        formatter: function (value) { return value; },
                    },
                },
                {
                    type: "value",
                    splitLine: { show: false },
                    axisLabel: {
                        show: true,
                        showMinLabel: true,
                        showMaxLabel: true,
                        formatter: function (value) { return value; },
                    },
                },
            ],
            series: [
                {
                    name: '均分',
                    data: subject_avg_score.map(x => x.avg_score),
                    type: 'bar',
                    label: {
                        show: true,
                        fontSize: 25
                    },
                    yAxisIndex: 0,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: "#83bff6" },
                            { offset: 0.5, color: "#188df0" },
                            { offset: 1, color: "#188df0" },
                        ]),
                    },
                },
                {
                    name: "不及格人数",
                    type: "line",
                    smooth: true,
                    yAxisIndex: 1,
                    data: subject_avg_score.map(x => x.fail_number),
                    label: { show: true }
                },
            ]
        });
    } else if (subject == "大数据处理") {
        let obj1 = response.filter(x => x.bigdataPrecessing != null).reduce((acc, { bigdataPrecessing, className }) => {
            if (!acc[className]) {
                acc[className] = { className, sum_score: 0, student_num: 0, fail_number: 0 }
            }
            acc[className].sum_score += Number(bigdataPrecessing);
            acc[className].student_num += 1;
            if (bigdataPrecessing < 60) {
                acc[className].fail_number += 1;
            }
            return acc;
        }, {});
        //  Object.values  ：返回一个给定对象自身的所有可枚举属性值的数组
        let arr = Object.values(obj1);
        let subject_avg_score = arr.map(({ className, sum_score, student_num, fail_number }) => ({ className, fail_number, avg_score: (sum_score / student_num).toFixed(2) }));
        let maxObjectTop5 = response.filter(x => x.bigdataPrecessing != null).map(({ bigdataPrecessing, name }) => ({ name, score: bigdataPrecessing })).sort((a, b) => b.score - a.score).slice(0, 5);
        top3_array.value = maxObjectTop5;
        let my_echart1 = echarts.init(document.getElementById('score'));
        my_echart1.setOption({
            xAxis: {
                data: subject_avg_score.map(x => x.className),
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                top: 0,
                left: "center",
                data: ["均分", "不及格人数"],
            },
            yAxis: [
                {
                    type: "value",
                    splitLine: { show: false },
                    axisLabel: {
                        show: true,
                        showMinLabel: true,
                        showMaxLabel: true,
                        formatter: function (value) { return value; },
                    },
                },
                {
                    type: "value",
                    splitLine: { show: false },
                    axisLabel: {
                        show: true,
                        showMinLabel: true,
                        showMaxLabel: true,
                        formatter: function (value) { return value; },
                    },
                },
            ],
            series: [
                {
                    name: '均分',
                    data: subject_avg_score.map(x => x.avg_score),
                    type: 'bar',
                    label: {
                        show: true,
                        fontSize: 25
                    },
                    yAxisIndex: 0,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: "#83bff6" },
                            { offset: 0.5, color: "#188df0" },
                            { offset: 1, color: "#188df0" },
                        ]),
                    },
                },
                {
                    name: "不及格人数",
                    type: "line",
                    smooth: true,
                    yAxisIndex: 1,
                    data: subject_avg_score.map(x => x.fail_number),
                    label: { show: true }
                },
            ]
        });
    } else if (subject == "大数据存储与挖掘") {
        let obj1 = response.filter(x => x.bigdataStorageMining != null).reduce((acc, { bigdataStorageMining, className }) => {
            if (!acc[className]) {
                acc[className] = { className, sum_score: 0, student_num: 0, fail_number: 0 }
            }
            acc[className].sum_score += Number(bigdataStorageMining);
            acc[className].student_num += 1;
            if (bigdataStorageMining < 60) {
                acc[className].fail_number += 1;
            }
            return acc;
        }, {});
        //  Object.values  ：返回一个给定对象自身的所有可枚举属性值的数组
        let arr = Object.values(obj1);
        let subject_avg_score = arr.map(({ className, sum_score, student_num, fail_number }) => ({ className, fail_number, avg_score: (sum_score / student_num).toFixed(2) }));
        let maxObjectTop5 = response.filter(x => x.bigdataStorageMining != null).map(({ bigdataStorageMining, name }) => ({ name, score: bigdataStorageMining })).sort((a, b) => b.score - a.score).slice(0, 5);
        top3_array.value = maxObjectTop5;
        let my_echart1 = echarts.init(document.getElementById('score'));
        my_echart1.setOption({
            xAxis: {
                data: subject_avg_score.map(x => x.className),
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                top: 0,
                left: "center",
                data: ["均分", "不及格人数"],
            },
            yAxis: [
                {
                    type: "value",
                    splitLine: { show: false },
                    axisLabel: {
                        show: true,
                        showMinLabel: true,
                        showMaxLabel: true,
                        formatter: function (value) { return value; },
                    },
                },
                {
                    type: "value",
                    splitLine: { show: false },
                    axisLabel: {
                        show: true,
                        showMinLabel: true,
                        showMaxLabel: true,
                        formatter: function (value) { return value; },
                    },
                },
            ],
            series: [
                {
                    name: '均分',
                    data: subject_avg_score.map(x => x.avg_score),
                    type: 'bar',
                    label: {
                        show: true,
                        fontSize: 25
                    },
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: "#83bff6" },
                            { offset: 0.5, color: "#188df0" },
                            { offset: 1, color: "#188df0" },
                        ]),
                    },
                },
                {
                    name: "不及格人数",
                    type: "line",
                    smooth: true,
                    yAxisIndex: 1,
                    data: subject_avg_score.map(x => x.fail_number),
                    label: { show: true }
                },

            ]
        });
    } else if (subject == "基于大数据构建用户画像") {
        let obj1 = response.filter(x => x.userProfile != null).reduce((acc, { userProfile, className }) => {
            if (!acc[className]) {
                acc[className] = { className, sum_score: 0, student_num: 0, fail_number: 0 }
            }
            acc[className].sum_score += Number(userProfile);
            acc[className].student_num += 1;
            if (userProfile < 60) {
                acc[className].fail_number += 1;
            }

            return acc;
        }, {});
        //  Object.values  ：返回一个给定对象自身的所有可枚举属性值的数组
        let arr = Object.values(obj1);
        let subject_avg_score = arr.map(({ className, sum_score, student_num, fail_number }) => ({ className, fail_number, avg_score: (sum_score / student_num).toFixed(2) }));
        let maxObjectTop5 = response.filter(x => x.userProfile != null).map(({ userProfile, name }) => ({ name, score: userProfile })).sort((a, b) => b.score - a.score).slice(0, 5);
        top3_array.value = maxObjectTop5;
        let my_echart1 = echarts.init(document.getElementById('score'));
        my_echart1.setOption({
            xAxis: {
                data: subject_avg_score.map(x => x.className),
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                top: 0,
                left: "center",
                data: ["均分", "不及格人数"],
            },
            yAxis: [
                {
                    type: "value",
                    splitLine: { show: false },
                    axisLabel: {
                        show: true,
                        showMinLabel: true,
                        showMaxLabel: true,
                        formatter: function (value) { return value; },
                    },
                },
                {
                    type: "value",
                    splitLine: { show: false },
                    axisLabel: {
                        show: true,
                        showMinLabel: true,
                        showMaxLabel: true,
                        formatter: function (value) { return value; },
                    },
                },
            ],
            series: [
                {
                    name: '均分',
                    data: subject_avg_score.map(x => x.avg_score),
                    type: 'bar',
                    label: {
                        show: true,
                        fontSize: 25
                    },
                    yAxisIndex: 0,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: "#83bff6" },
                            { offset: 0.5, color: "#188df0" },
                            { offset: 1, color: "#188df0" },
                        ]),
                    },
                },
                {
                    name: "不及格人数",
                    type: "line",
                    smooth: true,
                    yAxisIndex: 1,
                    data: subject_avg_score.map(x => x.fail_number),
                    label: { show: true }
                },

            ]
        });
    }


    // console.log(major_name);
    // let top3 = response.filter(x => x.major_name != '' && x.major_name != null && x.major_name != undefined).map(x => x.major_name).sort((a, b) => b - a).slice(0, 3);
    // console.log(top3);
    //剔除对象中所有值为null的属性
    // const deleteInvalidattribute = response_list.forEach(obj => {
    //     Object.keys(obj).forEach(item => {
    //         if (!obj[item] && obj[item] != 0) {
    //             delete obj[item];
    //         }
    //     })
    // });
    // console.log(deleteInvalidattribute);     //压根就不用剔除null值属性，console.log()打印
}

onMounted(() => {

})

</script>

<style lang="scss" scoped>
.el-card {
    margin: 1%;
    border-radius: 10px;
}

.my-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
</style>
  